import { Component } from "react";
import { LgDrawer, MaskBox, Box3D } from "../../components/simple";
import leftImg from "../../assets/ststic/images/iconPoint.png"
import CesMap from "../../modules/Map3D/CesMap";
import data from "../../assets/ststic/data/datadaping.json"
import datas from "../../assets/ststic/data/ldqbjdata.json"
import "../../assets/styles/simple.scss";
import entities from "../../modules/Map3D/entites";
const Cesium = window['Cesium'];

const urlList = [
    {
        url: require("../../assets/ststic/images/2-1.png"),
        cameraPosition: [120.19176810137712, 28.091045846691294, 27092.249250972516],
        cameraAngle: [5.508344762439795, -0.5701433648713694, 6.280833423031201],
    },
    {
        url: require("../../assets/ststic/images/2-2.png"),
        cameraPosition: [119.8806987896298, 28.454366810742652, 817.3135645763699],
        cameraAngle: [1.1233437846416239, -0.31107771762803305, 0.000006044549102135477],
    },
    {
        url: require("../../assets/ststic/images/2-3.png"),
        cameraPosition: [119.93787254567744, 28.408807015367472, 2706.977385306227],
        cameraAngle: [5.925220788184645, -0.3784029357566341, 0.00007150403193811883],
    }
];

export default class Map3D extends Component {
    CesMap;
    viewer;
    constructor(props) {
        super(props)
    }
    componentDidMount() {
        document.getElementById('UIIDBY').style.background = `url(${require("../../assets/ststic/images/bg.png")})`;

        this.CesMap = new CesMap('CESIUMID');
        this.viewer = this.CesMap.viewer;
        /**
               * 添加点位标记
               */
        const entitie = new entities(this.CesMap.viewer);
        /**
         * 重点建筑物光墙
         */
        data.平面地图.forEach(ite => {
            let ps = [];
            ite.outline.forEach(item => {
                var cartographic = Cesium.Cartesian3.fromDegrees(item[0], item[1], item[2]);

                ps.push(cartographic)
            });
            this.CesMap.createWall(ps);
            entitie.addCountryPoint({
                postiton: ite.po,
                url: require(
                    `../../assets/ststic/images/icon-3-4.png`
                ),
                color: [255, 87, 0],
                id: ite.name,
                text: ite.name,
                type: '乡镇点位数据',
                data: ite,
                polyline: true
            })
        });


        data.乡镇数据.forEach(ite => {

            entitie.addCountryPoint({
                postiton: ite.po,
                url: require(
                    `../../assets/ststic/images/icon-3-${(
                        Math.random() * 10 > 8
                    ) ? '1' : (
                        Math.random() * 10 < 3 ? '2' : '3'
                    )}.png`
                ),
                color: [2, 254, 170],
                id: ite.name,
                text: '',
                type: '乡镇点位数据',
                data: ite,
                polyline: false
            })
        });

        let ps = [];
        /**
         * 添加莲都区边界
         */
        datas.forEach(item => {
            var cartographic = Cesium.Cartesian3.fromDegrees(item[0], item[1], item[2]);

            ps.push(cartographic)
        });
        this.CesMap.createWall(ps, [0, 122, 255]);



    }
    /**
     * 更改相机视角
     * 必须传入两个参数相机位置、相机角度
     * @param sub {position,angle}
     */
    setView = (sub) => {
        this.CesMap.setView(sub)
    }

    /**
     * 图例点击事件
     */
    lengadOnClick = (num) => {
        console.log(num);
        this.setView({
            position: urlList[num].cameraPosition,
            angle: urlList[num].cameraAngle
        });
        this.getView()
    }
    getView = () => {

        let { x, y, z } = this.viewer.camera.position;

        let { heading, pitch, roll } = this.viewer.camera;


        var ellipsoid = this.viewer.scene.globe.ellipsoid;
        var cartesian3 = new Cesium.Cartesian3(x, y, z);
        var cartographic = ellipsoid.cartesianToCartographic(cartesian3);
        var lat = Cesium.Math.toDegrees(cartographic.latitude);
        var lng = Cesium.Math.toDegrees(cartographic.longitude);
        var alt = cartographic.height;
        console.log(`${lng}, ${lat}, ${alt}, ${heading}, ${pitch}, ${roll},`);

    }
    render() {
        return (

            <div className={'drawer-main'} id={'UIIDBY'}

            >
                {/* <MaskBox /> */}
                <div id={'CESIUMID'}></div>
                <Box3D
                    data={urlList}
                    event={this.lengadOnClick}
                />
            </div>


        )
    }
}